<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn1{
            width: 150px;
            height: 40px;
            font-size: 24px;
            font-family: '隶书';
            background-color: yellow;
            color :aqua;
            border: 3px solid red;
            border-radius: 5px;
        }
    </style>
    <!-- 
        引入方式
        1 内嵌式                在head中通过一对script标签引入
        2 引入外部脚本文件       在head中通过一对script标签引入外部js文件
            一个html中可以有多个script标签
            script标签如果用于引入外部js文件，中间最好不要有如何字符 包括空格和换行


    -->
    <!-- <script>
        /* 
        1 js如何声明的函数？ java 中的函数 public void suprise（）{}     function suprise（）{}
        2 函数如何和单击按钮的行为绑定到一起？
        3 如何弹窗提示？


        */
       function suprise(){
            //弹窗提示
            alert("hello")
       }
    </script> -->
    <script src="js/button.js" type="text/javascript"></script>
    <script>
       function sayhello(){
            //弹窗提示
            alert("hello js")
       }
    </script>
    
</head>
<body>
    <button class="btn1" onclick="suprise()">点我有惊喜</button>
    <button class="btn1" onclick="sayhello()">sayhello</button>
</body>
</html>